<template>
  <div class="center-right">
    <div class="topSearch">
      <input
        v-model="searchTile"
        type="text"
        placeholder="please enter"
        @keyup.enter.native="search"
      >
      <div class="searchBtn" @click="search">
        <img src="@/assets/loginImgs/search.png" alt="">
      </div>
    </div>
    <div class="bottom-content">
      <div class="up-header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{ title ? title : 'Home' }}</el-breadcrumb-item>
          <!-- <el-breadcrumb-item>logistics</el-breadcrumb-item> -->
        </el-breadcrumb>
      </div>
      <div class="up">
        <div class="up-footer">
          <div v-if="!tableData.length && !loading" class="nodata">
            <img
              style="width: 140px;"
              src="@/assets/loginImgs/nodata.png"
              alt=""
            >
          </div>
          <ul>
            <li v-for="item in tableData" :key="item.id" v-loading="loading">
              <span @click="goCategoryDetial(item)">{{
                item.title ? item.title : item.article.title
              }}</span>
            </li>
          </ul>
          <div style="text-align: center;">
            <el-pagination
              v-if="tableData.length > 20"
              background
              :current-page="pageNo"
              :page-size="pageSize"
              :total="total"
              layout="prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  helpPage,
  articleTextTutorialRecommend,
  articleTextTutorialHot,
  articleTextTutorialMust,
  articleTextTutorialLatest
} from '@/api/article';
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    more: {
      type: String,
      default: ''
    },
    searchName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      detialId: 0,
      pageNo: 1,
      pageSize: 20,
      total: 0,
      name: '',
      searchTile: '',
      isShow: false,
      threeMenuShow: false,
      loading: true
    };
  },
  watch: {
    id(val) {
      this.detialId = this.id;
      this.categoryMenu(this.id);
    },
    title(val) {
      this.name = val;
    },
    searchName(val) {
      this.categoryMenu(this.id);
    }
  },
  mounted() {
    if (this.more === 'hot') {
      this.getHot();
    } else if (this.more === 'must') {
      this.getMust();
    } else if (this.more === 'latest') {
      this.getLatest();
    } else if (this.more === 'recommend') {
      this.getRecommend();
    } else if (this.more === '') {
      this.searchTile = this.searchName;
      this.categoryMenu(this.id);
    }
    // this.categoryMenu(this.id);
    this.$nextTick(function() {
      if (
        document.documentElement.clientHeight >
        document.getElementsByClassName('content')[0].clientHeight
      ) {
        document.getElementsByClassName('content')[0].style.minHeight =
          document.documentElement.clientHeight -
          document.getElementsByClassName('header')[0].clientHeight -
          document.getElementsByClassName('footer')[0].clientHeight +
          'px';
      } else {
        document.getElementsByClassName('content')[0].style.minHeight =
          950 + 'px';
      }
    });
  },
  methods: {
    nextMenu() {
      this.isShow = !this.isShow;
    },
    threeMenu() {
      this.threeMenuShow = !this.threeMenuShow;
    },
    categoryMenu(id) {
      this.loading = true;
      helpPage({
        articleCategoryId: id,
        beginCreateTime: '',
        endCreateTime: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        title: this.searchTile,
        type: 2
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.totalCount;
        this.loading = false;
      });
    },
    search() {
      this.categoryMenu(this.id);
    },
    getHot() {
      this.loading = true;
      articleTextTutorialHot().then((res) => {
        this.tableData = res.data.data;
        this.loading = false;
      });
    },
    getLatest() {
      this.loading = true;
      articleTextTutorialLatest().then((res) => {
        this.tableData = res.data.data;
        this.loading = false;
      });
    },
    getRecommend() {
      this.loading = true;
      articleTextTutorialRecommend().then((res) => {
        this.tableData = res.data.data;
        this.loading = false;
      });
    },
    getMust() {
      this.loading = true;
      articleTextTutorialMust().then((res) => {
        this.loading = false;
        this.tableData = res.data.data;
        this.loading = false;
      });
    },
    goCategoryDetial(item) {
      this.$emit('category', { id: item.id ? item.id : item.article.id, categoryId: this.id, name: this.title, type: 'detial' });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.categoryMenu(this.detialId);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.categoryMenu(this.detialId);
    }
  }
};
</script>
<style lang="scss" scoped>
.nodata {
  text-align: center;
  margin: 50px;
}
.content {
  width: 100%;
  height: 100%;
  margin-top: 70px;
  padding-bottom: 40px;
  background: #f9f9f9;
}
::v-deep .el-pagination .active {
  background-color: #02a152 !important;
}
.topSearch {
  height: 46px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
  overflow: hidden;
  // border-radius: calc(100vw / 480) 0 0 calc(100vw / 480);

  input {
    width: 930px;
    height: 46px;
    padding: 0 40px;
    line-height: 46px;
    // margin: 10px 0;
    font-size: 18px;
    outline: none;
    color: #666666;
    background: rgba(255, 255, 255, 1);
    border: 1px solid #e6e6e6;
  }
  .searchBtn {
    position: absolute;
    top: 10px;
    left: 10px;
    img {
      width: 20px;
      height: 20px;
      margin-top: 5px;
    }
  }
}
.bottom-content {
  background: #ffffff;
  border: 1px solid #e6e6e6;
}
.center {
  width: 1200px;
  margin: 0 auto;
  &-right {
    width: 930px;
    min-height: 250px;
    display: inline-block;
    .up-header {
      width: 930px;
      height: 39px;
      padding-left: 30px;
      color: #e6e6e6;
      border-bottom: 1px solid #e6e6e6;
      .el-breadcrumb {
        height: 39px;
        line-height: 39px;
      }
      span {
        font-size: 16px;
        color: #02a152;
      }
    }
    .up {
      margin: 20px 40px;
      &-footer {
        font-size: 14px;
        color: rgba(2, 161, 82, 1);
        ul {
          margin: 0;
          padding: 0;
          li {
            line-height: 30px;
            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
